<template>
  <!-- ----------------- 上部：页面标签视图 ----------------- -->
  <MainTop>
    <template #navlogo>
      <!-- <jc-icon name="jcstudio-v1-color" /> -->
    </template>
  </MainTop>
  <!-- ----------------- 下部：拖动大小视图 ----------------- -->
  <MainBottom widthRatio="4:10">
    <!-- 可拖动左侧 -->
    <template #leftBox>
      <!-- 左侧选项卡 -->
      <TheLeftTabsCard
        :datas="[
          { name: 'home', title: '主页', icon: 'home' },
          { name: 'address', title: '通讯录', icon: 'user' },
          { name: 'according', title: '手风琴', icon: 'logo-wechart' },
          { name: 'collect', title: '收藏', icon: 'heart' }
        ]"
      >
        <!-- 主页 -->
        <template #home> 主页 </template>
        <!-- 通讯录 -->
        <template #address> 通讯录 </template>

        <template #according>
          <According :menus="menus" />
        </template>

        <!-- 收藏 -->
        <template #collect> 收藏 </template>
      </TheLeftTabsCard>
    </template>
    <!-- 可拖动右侧 -->
    <template #rightBox>
      <!-- 工具栏 -->
      <ToolsNav />
      <!-- 路由视图 -->
      <RouterView v-slot="{ Component }">
        <transition
          name="RouterViewTransition"
          enter-active-class="animate__animated animate__flipInX"
          leave-active-class="animate__animated animate__bounceOutRight"
        >
          <component :is="Component" />
        </transition>
      </RouterView>
    </template>
  </MainBottom>
  <PopupBus> </PopupBus>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { RouterView } from 'vue-router'
import 'animate.css'
import TheLeftTabsCard from '@/components/tabs/TheLeftTabsCard.vue'
import MainTop from '@/apps/pages/PageTabs.vue'
import MainBottom from '@/components/frame/DragSize.vue'
import ToolsNav from '@/components/navs/ToolsNav.vue'
import According from '@/components/tabs/according'

import PopupBus from './apps/popup/PopupBus.vue'
import { useTabStore } from './apps/pages/stores/tabs'

const menus = ref([
  {
    title: 'title 1',
    isOpen: false,
    children: [
      { title: 'title 1-1', isOpen: false },
      {
        title: 'title 1-2',
        isOpen: false,
        children: [{ title: 'title 1-2-1' }, { title: 'title 1-2-2' }, { title: 'title 1-2-3' }]
      },
      {
        title: 'title 1-3',
        isOpen: false,
        children: [{ title: 'title 1-3-1' }, { title: 'title 1-3-2' }, { title: 'title 1-3-3' }]
      }
    ]
  },
  { title: 'title 2', isOpen: false },
  {
    title: 'title 3',
    isOpen: false,
    children: [
      { title: 'title 3-1', isOpen: false },
      { title: 'title 3-2', isOpen: false },
      { title: 'title 3-3', isOpen: false }
    ]
  },
  {
    title: 'title 4',
    isOpen: true,
    children: [
      { title: 'title 4-1', isOpen: false },
      {
        title: 'title 4-2',
        isOpen: false,
        children: [
          { title: 'title 4-2-1', isOpen: false },
          { title: 'title 4-2-2', isOpen: false },
          { title: 'title 4-2-3', isOpen: false }
        ]
      },
      { title: 'title 4-3', isOpen: false }
    ]
  },
  {
    title: 'title 5',
    isOpen: true,
    children: [
      { title: 'title 5-1', isOpen: false },
      { title: 'title 5-2', isOpen: false },
      { title: 'title 5-3', isOpen: false }
    ]
  },
  {
    title: 'title 6',
    id: '6',
    isOpen: true,
    children: [
      { title: 'title 6-1', isOpen: false },
      { title: 'title 6-2', isOpen: false },
      { title: 'title 6-3', isOpen: false }
    ]
  }
])

// const { reloadFrom } = useTabStore()
// reloadFrom([
//   {
//     title: "item1 ",
//     url:'http://www.baidu.com',
//     icon: "system-v2-color",
//   },
//   { title: "item 2", url:'http://www.qq.com', icon: "shopping-cart-full-color" },
//   {
//     title: "item 3",
//     url:'http://thispage.tech:9680',
//     icon: "study-color",
//   },
// ])
</script>

<style lang="scss" scoped></style>
